<template>
	<view class="content">
			<map @tap="getMapLocation" style="width: 100%; height: 465px;" :latitude="latitude" :longitude="longitude" :markers="markers" :polyline="polyline" scale="15">
			</map>
	</view>
	<view class="text">
		<text class="text1">您现在位于{{this.addressComponent.city}}{{this.addressComponent.district}}</text>
		<text class="text2">您现在距离东门直线距离是{{this.distance_1}}公里</text>
		<text class="text3">您现在距离西南门直线距离是{{this.distance_2}}公里</text>
		<text class="text4">您现在距离西门直线距离是{{this.distance_3}}公里</text>
		<text class="text5">您现在距离西北门直线距离是{{this.distance_4}}公里</text>
	</view>
	<view class="uni-button-group">
		<button class="uni-button" @click="markertap"
			:styles="{'borderColor':'#678D5D'}">导航</button>
	</view>

</template>

<script>
	import QQMapWX from '../../libs/qqmap-wx-jssdk.js'
	const tMap = new QQMapWX({
			key: 'FUSBZ-PLTCV-ATIPW-UMWRJ-RBDVF-OXBXG'
		})
	export default{
		data(){
			return{
				//地图中心点		
				latitude: 31.282916,
				longitude: 121.501467,
				isLocated: false,
				anchorX:8,
				anchorY:8,
				
				//小区
				plot: {},
				//详细地址
				address: '',
				//地址组成
				addressComponent: {
				    city: "",
					district: "",
					nation: "",
					province: "",
					street: "",
					street_number: "",
					},
				//东门距离
				distance_1:0.1,
				//西南门距离
				distance_2:0.1,	
				//西门距离
				distance_3:0.1,
				//西北门距离
				distance_4:0.1,
				
				markers: [
					{
					id:1,
					latitude: 0,
					longitude: 0,
					iconPath: '../../static/location_green.png',
					width:30,
					height:30,
					label:{
						content:'我的位置',
						color:'#008000',
						bgColor:'#F0f0f0',
						fontSize:12,
						anchorX:10,
						anchorY:-20,
						borderRadius: 5,
						textAlign:'left'}
					},
					
					{
					id:2,
					latitude: 31.28312,
					longitude:121.50496,
					iconPath: '../../static/location.png',
					width:20,
					height:20,
					label:{
						content:'毛主席像',
						color:'#C00000',
						bgColor:'#F0f0f0',
						fontSize:10,
						anchorX:this.anchorX,
						anchorY:this.anchorY,
						borderRadius: 5,
						textAlign:'center'}
					},	
					
					{
					id:3,
					latitude: 31.284585,
					longitude: 121.500005,
					iconPath: '../../static/location.png',
					width:20,
					height:20,
					label:{
						content:'孔子像',
						color:'#C00000',
						bgColor:'#F0f0f0',
						fontSize:10,
						anchorX:this.anchorX,
						anchorY:this.anchorY,
						borderRadius: 5,
						textAlign:'left'}	
					},
					
					{
					id:4,						
					latitude: 31.282566,
					longitude: 121.506171,
					iconPath: '../../static/location.png',
					width:20,
					height:20,
					label:{
						content:'东门',
						color:'#C00000',
						bgColor:'#F0f0f0',
						fontSize:10,
						anchorX:this.anchorX,
						anchorY:this.anchorY,
						borderRadius: 5,
						textAlign:'left'}
					},
					
					{
					id:5,
					latitude: 31.28,
					longitude: 121.501596,
					iconPath: '../../static/location.png',
					width:20,
					height:20,
					label:{
						content:'西南门',
						color:'#C00000',
						bgColor:'#F0f0f0',
						fontSize:10,
						anchorX:this.anchorX,
						anchorY:this.anchorY,
						borderRadius: 5,
						textAlign:'left'}
					},
					
					{
					id:6,
					latitude: 31.286784,
					longitude: 121.501192,
					iconPath: '../../static/location.png',
					width:20,
					height:20,
					label:{
						content:'西北门',
						color:'#C00000',
						bgColor:'#F0f0f0',
						fontSize:10,
						anchorX:this.anchorX,
						anchorY:this.anchorY,
						borderRadius: 5,
						textAlign:'left'}
					},
					
					{
					id:7,
					latitude: 31.284683,
					longitude: 121.496707,
					iconPath: '../../static/location.png',
					width:20,
					height:20,
					label:{
						content:'西门',
						color:'#C00000',
						bgColor:'#F0f0f0',
						fontSize:10,
						anchorX:this.anchorX,
						anchorY:this.anchorY,
						borderRadius: 5,
						textAlign:'left'}
					},
					{
					id:8,
					latitude: 31.284671,
					longitude: 121.502313,
					iconPath: '../../static/location.png',
					width:20,
					height:20,
					label:{
						content:'研究生院',
						color:'#C00000',
						bgColor:'#F0f0f0',
						fontSize:10,
						anchorX:this.anchorX,
						anchorY:this.anchorY,
						borderRadius: 5,
						textAlign:'left'}	
					}
					],							
					//绘制边界线
				 polyline: [{
					    dottedLine:true,
				        width: 2,
				         color: '#C00000',
				        // fillColor: '#ffffff',
						level:'labels',
				        points: [
				          {
				            latitude: "31.284695",
				            longitude: "121.507727"
				          },
				          {
			
				            latitude: "31.286851",
				            longitude: "121.501148"
				          },
				          {
				            latitude: "31.287342",
				            longitude: "121.501096"
				          },
				          {
				            latitude: "31.287151",
				            longitude: "121.499783"
				          },
						  
						  {
						    latitude: "31.284803",
						    longitude: "121.496756"
						  },
						  {
							latitude: "31.283112",
							longitude: "121.496079"  
						  },
				          {
				            latitude: "31.28209",
				            longitude: "121.496123"
				          },
				          {
				            latitude: "31.278868",
				            longitude: "121.504491"
				          },
						  {
						    latitude: "31.284695",
						    longitude: "121.507727"
						  }
				       
				        ]
				      }],
			}
		},
		onLoad(){
		    this.getLocation()
		},
		methods:{
			getLocation(){
				const self=this
				uni.getLocation({
					type: 'gcj02',
					altitude:false,
					isHighAccuracy:true,
					
					success(res){
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						
						self.markers[0].longitude=res.longitude;
						self.markers[0].latitude=res.latitude;
						console.log(self.markers[0])
						self.mypointToGate(self);

					},
					complete(){
						tMap.reverseGeocoder({
							location:{
								latitude: self.markers[0].latitude,
								longitude: self.markers[0].longitude
							},
							success(res){
								console.log(res)
								console.log('解析地址成功');
								
								self.plot = res.result.formatted_addresses;
								self.address = res.result.address;
								self.addressComponent = res.result.address_component;	
							},
							fail: function(res) {
								uni.showToast({
									title: '定位失败',
										duration: 2000,
										icon: 'none'
									});
								console.log(res);
							},
							complete: function(res) { //无论成功失败都会执行
								console.log(res);
							}
							
						})
					}
				});
			},
			
			getMapLocation(){
				console.log('点击触发')
				var that = this;
				uni.chooseLocation({
					success: (res) => {
						that.markers[0].latitude = res.latitude;
						that.markers[0].longitude= res.longitude;
						},
					complete() {
						
						tMap.reverseGeocoder({
							location: {
								latitude: that.markers[0].latitude,
								longitude: that.markers[0].longitude
							},
							success: function(res) {
								console.log('自选地址解析地址成功');
								that.plot = res.result.formatted_addresses;
								that.address = res.result.address;
								that.addressComponent = res.result.address_component;
								that.mypointToGate(that)
						
							},
							fail: function(res) {
								uni.showToast({
									title: '定位失败',
									duration: 2000,
									icon: 'none'
								});
								
							},
							complete: function(res) { //无论成功失败都会执行
								console.log(res);
							}
						});
					}
				})
			
			},
			
			//经纬度转换成三角函数中度分表形式。			
			Rad(d) {
				return d * Math.PI / 180.0; 
			},
			
			/*
			计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
			默认单位km
			*/
			getMapDistance(lat1, lng1, lat2, lng2) {
				var radLat1 = this.Rad(lat1);
				var radLat2 = this.Rad(lat2);
				var a = radLat1 - radLat2;
				var b = this.Rad(lng1) - this.Rad(lng2);
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000; //输出为公里
				s=s.toFixed(2);
				return s;
			},
			
			//计算各个大门距离我的距离
			mypointToGate(e){
				//计算我的位置和东门的距离
				e.distance_1=e.getMapDistance(e.markers[0].latitude,e.markers[0].longitude,31.282566,121.506171);
				console.log('我和东门的距离'+e.distance_1)
				//计算我的位置和西南门的距离
				e.distance_2=e.getMapDistance(e.markers[0].latitude,e.markers[0].longitude,31.28,121.501596);
				//计算我的位置和西门的距离
				e.distance_3=e.getMapDistance(e.markers[0].latitude,e.markers[0].longitude,31.284683,121.496707);
				//计算我的位置和西北门的距离
				e.distance_4=e.getMapDistance(e.markers[0].latitude,e.markers[0].longitude,31.286784,121.501192)
			},
			//导航到中心点
			markertap(){
				console.log('导航模块')
				let that=this
				uni.getLocation({
					success: (res) => {
						uni.openLocation({
							latitude:that.latitude,
							longitude:that.longitude,
							success:function(){
								console.log('success')
							},
							fail:function(){
								uni.showModal({
									title:'导航错误',
									content:'请检查定位是否打开',
									success:function(res){
										if(res.confirm){
											console.log('用户点击确定')
										}else if(res.cancel){
											console.log('用户点击取消')
										}
									}
								})
							}
						})
					}
				})
				
			}

		}
	}
</script>

<style lang="less">
	.text{
	display: flex;
	flex-direction: column;
	font-size: 9pt;
	justify-content: center;
	margin:10px 0 0 5px;
	
	   .text1 {
		   font-size: 7pt;
		   margin-bottom: 5px;
	   }
	

	
	}
		
	
</style>